<!-- App.vue -->
<template>
    <MyHeader @handleAbout="handleAbout" />
    <RouterView />
    <MyAbout :isShow="isShow" @handleClose="handleClose" />
</template>
<script setup>
import { RouterView } from "vue-router";
import { ref, onMounted } from "vue";
import MyHeader from "@/components/MyHeader.vue";
import MyAbout from "@/components/MyAbout.vue";

const isShow = ref(false);
// 把isShow的值传递给子组件,并设置为true
const handleAbout = (value) => {
    isShow.value = value;
};
// 把isShow的值传递给子组件,并设置为false
const handleClose = (value) => {
    isShow.value = value;
};
</script>
<style>
.box-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.text_2xl {
    font-size: 24px;
}
.text_lg {
    font-size: 16px;
    font-weight: normal;
}
.text_sm {
    font-size: 14px;
}
.text_xs {
    font-size: 12px;
}
.flex {
    display: flex;
    text-align: center;
}
.gap6 {
    gap: 1.5rem;
}
.flex-col {
    flex-direction: column;
}
.flex-1 {
    flex: 1 1 0;
}
.gap4 {
    gap: 1rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
</style>
